<script setup>
import { ref, computed } from 'vue'
import { lStorage } from '@/utils/storage'

// 定义 emit 事件
const emit = defineEmits(['menuSelect'])

const menuList = [
	{
		name: '热物性质计算工具',
		enName: 'Melt Properties Tools',
		icon: '',
		id: '1',
		children: [
			{
				name: '表面张力计算',
				enName: 'Surface Tension',
				id: '1-1',
				icon: '',
				component: 'meltProperties',
			},
			{
				name: '粘度计算',
				enName: 'Viscosity',
				id: '1-2',
				icon: '',
				component: 'meltProperties',
			},
			{
				name: '热导率/电导率计算',
				enName: 'Conductivity',
				id: '1-3',
				icon: '',
				component: 'conductivity',
			},
		],
	},
	{
		name: '相图计算工具',
		enName: 'Phase Diagram Tools',
		icon: '',
		id: '2',
		children: [
			{
				name: '点计算',
				enName: 'Point',
				id: '2-1',
				icon: '',
				component: 'point',
			},
			{
				name: '线计算',
				enName: 'Line',
				id: '2-2',
				icon: '',
				component: 'line',
			},
			{
				name: '二元相图',
				enName: 'Phase Diagram',
				id: '2-3',
				icon: '',
				component: 'phase',
			},
			{
				name: '三元等温截面',
				enName: 'Phase Diagram',
				id: '2-4',
				icon: '',
				component: 'phase',
			},
			{
				name: '高元等温截面',
				enName: 'Phase Diagram',
				id: '2-5',
				icon: '',
				component: 'phase',
			},
		],
	},
	{ name: '电位计算', enName: 'Potential', icon: '', children: [], id: '3' },
	{
		name: '化学反应动力计算',
		enName: 'Kinetics',
		icon: '',
		id: '4',
		children: [],
	},
	{
		name: '沉淀模拟',
		enName: 'Precipitation',
		icon: '',
		id: '5',
		children: [],
	},
	{ name: '相场模拟', enName: 'Phase Field', icon: '', id: '6', children: [] },
	{
		name: '凝固模拟',
		enName: 'Solidification',
		icon: '',
		id: '7',
		children: [],
	},
	{ name: '扩散模拟', enName: 'Diffusion', icon: '', id: '8', children: [] },
]

const locales = computed(() => lStorage.getReactive().value.language || 'zh')

const activeIndex = ref('1-1')

const handleSelect = (key, keyPath) => {
	activeIndex.value = key

	// 构建面包屑数组
	const breadcrumb = []

	// 查找对应的菜单项
	const findMenuItem = (items, targetId) => {
		for (const item of items) {
			if (item.id === targetId) {
				return item
			}
			if (item.children && item.children.length > 0) {
				const found = findMenuItem(item.children, targetId)
				if (found) {
					// 如果是子菜单，需要添加父菜单名称
					if (found.id === targetId) {
						breadcrumb[0] = {
							name: item.name,
							enName: item.enName,
							component: item.component,
						}
						breadcrumb[1] = {
							name: found.name,
							enName: found.enName,
							component: found.component,
						}
						return found
					}
				}
			}
		}
		return null
	}

	// 查找菜单项并构建面包屑
	const targetItem = findMenuItem(menuList, key)
	if (targetItem) {
		// 如果是顶级菜单（没有父菜单）
		const parentItem = menuList.find(
			(item) => item.children && item.children.some((child) => child.id === key)
		)
		if (!parentItem) {
			// 顶级菜单
			breadcrumb.push(
				locales.value === 'zh' ? targetItem.name : targetItem.enName
			)
		}
		// 子菜单的情况已经在 findMenuItem 中处理了
	}

	// 发送事件给父组件
	emit('menuSelect', {
		key,
		keyPath,
		breadcrumb,
	})
}
</script>

<template>
	<el-menu
		class="NavBar"
		:default-active="activeIndex"
		@select="handleSelect"
		:unique-opened="false"
	>
		<template v-for="item in menuList" :key="item.id">
			<el-sub-menu v-if="item.children.length > 0" :index="String(item.id)">
				<template #title>
					<span class="menu-text">{{
						locales === 'zh' ? item.name : item.enName
					}}</span>
				</template>
				<el-menu-item
					v-for="child in item.children"
					:key="child.id"
					:index="String(child.id)"
				>
					<span class="menu-text">{{
						locales === 'zh' ? child.name : child.enName
					}}</span>
				</el-menu-item>
			</el-sub-menu>
			<el-menu-item v-else :index="String(item.id)" disabled>
				<span class="menu-text">{{
					locales === 'zh' ? item.name : item.enName
				}}</span>
			</el-menu-item>
		</template>
	</el-menu>
</template>

<style scoped lang="scss">
.NavBar {
	width: 100%;
	height: 100%;
	background-color: var(--theme-card-bg);
	border-right: 1px solid var(--theme-content-border);
	overflow-y: auto;

	.menu-text {
		display: block;
		width: 100%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		color: var(--theme-text-primary) !important;
	}

	// 菜单项基础样式
	:deep(.el-menu-item) {
		color: var(--theme-text-primary) !important;
		background-color: transparent !important;
		border-right: none !important;

		&:hover {
			background-color: var(--theme-content-hover) !important;
			color: var(--theme-accent) !important;
		}

		&.is-active {
			background-color: var(--theme-accent) !important;
			color: var(--ptable-text-highlight) !important;
			border-right: 3px solid var(--theme-accent) !important;
		}
	}

	// 子菜单标题样式
	:deep(.el-sub-menu__title) {
		color: var(--theme-text-primary) !important;
		background-color: transparent !important;

		&:hover {
			background-color: var(--theme-content-hover) !important;
			color: var(--theme-accent) !important;
		}
	}

	// 子菜单内容区域
	:deep(.el-sub-menu) {
		.el-menu {
			background-color: var(--theme-card-bg) !important;
		}
	}

	// 箭头图标
	:deep(.el-sub-menu__icon-arrow) {
		display: block !important;
		color: var(--theme-text-secondary) !important;
	}

	// 菜单项图标
	:deep(.el-menu-item__icon) {
		color: var(--theme-text-secondary) !important;
	}

	// 子菜单展开时的箭头
	:deep(.el-sub-menu.is-opened) {
		.el-sub-menu__icon-arrow {
			color: var(--theme-accent) !important;
		}
	}

	// 激活状态的子菜单标题
	:deep(.el-sub-menu.is-active) {
		.el-sub-menu__title {
			color: var(--theme-accent) !important;
		}
	}
}
</style>
